page {
    /*#### 父组件日历颜色定义*/
    --calendarPageColor: #f0f4ff;
    /* 加重颜色*/
    --calendarMainColor: #1f6ed4;
    /* 加重的亮颜色 用于选中日期的数据小圆点 */
    --calendarLightColor: #a2c7ff;
}

.calendar-text {
    color: var(--calendarMainColor) !important;
}

.calendar-bg {
    background-color: var(--calendarMainColor) !important;
}

.cal-container {
    width: 100%;
    padding-top: 10rpx;
    padding-bottom: 20rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.cal-container .left,
.cal-container .right {
    width: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80rpx;
    height: 400rpx;
    color: #888;
}

.cal-container .cal-nav {
    position: relative;
    width: 100%;
    min-height: 60rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #000;
    border-bottom-left-radius: 15rpx;
    border-bottom-right-radius: 15rpx;
    font-size: 32rpx;
    font-weight: bold;
}

.cal-container .cal-nav .select-item {
    width: 500rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.cal-container .cal-nav .arrow {
    width: 150rpx;
    font-size: 40rpx;
}

.cal-container .cal-nav .fold {
    position: absolute;
    right: 0rpx;
    width: 100rpx;
    font-size: 40rpx;
    font-weight: bold;
}

.cal-container .cal-nav .to-now {
    position: absolute;
    left: 5rpx;
    width: 100rpx;
    font-size: 30rpx;
    color: var(--calendarMainColor);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-main {
    flex: 1;
    padding: 10rpx 0rpx 20rpx;
    background-color: #fcfcfc;
}

.cal-title {
    display: flex;
    justify-content: center;
}

.cal-title view {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
}

.cal-center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.cal-center.cur {
    border-bottom-right-radius: 0rpx;
    border-bottom-left-radius: 0rpx;
}

.cal-center .cube {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    border: 1rpx solid #ccc;
}

.cal-center .cube.glow {
    animation: glow 300ms linear 1 alternate;
}

@keyframes glow {
    0% {
        background-color: #ececec;
    }

    100% {
        background-color: inherit;
    }
}

.cal-center .cube.lunar {
    margin-bottom: 8rpx;
}

.cal-center .num-grid {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cal-center .cube.lunar .num-grid {
    width: 85rpx;
    height: 85rpx;
}

.cal-center .num-grid.now-day-cur {
    background-color: orange;
    height: 60rpx;
    width: 60rpx;
    border-radius: 50%;
    color: #fff;
}

.cal-center .num-grid.now-day-cur .text-no-month {
    color: #fff;
}

.cal-center .num {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
}

.cal-center .num .lunar {
    font-size: 20rpx;
    font-weight: normal;
    color: #aaa;
}

.cal-center .text-no-month {
    color: #aaa;
}

.cal-center .timeout {
    background-color: #f2f2f2;
}

.cal-center .timeout .num-grid {
    color: #aaa;
}

/* 当日有数据 */
.data-has {
    position: relative;
    font-family: 'icon';
    font-size: inherit;
    font-style: normal;
}

.data-has::before {
    position: absolute;
    content: '\e699';
    right: 1rpx;
    bottom: 0rpx;
    color: #999;
    font-size: 22rpx;
}

.cube.data-checked.data-has::before {
    color: #fff;
}

/* 当日有预约 */
.join-has {
    position: relative;
    font-family: 'icon';
    font-size: inherit;
    font-style: normal;
}

.join-has::before {
    position: absolute;
    content: '\e6c0';
    right: 1rpx;
    bottom: 0rpx;
    color: #999;
    font-size: 24rpx;
}

.cube.data-checked.join-has::before {
    color: #fff;
}

/* 选中某日 */
.cube.data-checked {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
}

.cube.data-checked .text-no-month {
    color: #fff !important;
}
